<template>
  <div>
    <!-- titile -->
    <van-nav-bar title="支付中心" left-arrow @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" size=".5rem" color="#000000" />
      </template>
    </van-nav-bar>
    <!-- notice column -->
    <van-row justify="center">
      <van-col class="notice_column">
        <span class="text"
          >请在
          <span class="time">{{ 4 }}分{{ 52 }}秒</span>
          内完成支付,过时订单将会取消。</span
        >
      </van-col>
    </van-row>
    <!-- pay way -->
    <van-radio-group v-model="checked" class="pay_way">
      <van-cell-group>
        <van-cell clickable @click="checked = '1'">
          <template #title>
            <div class="item_radio">
              <van-image
                width="1rem"
                height="1rem"
                src="@/../public/cartImg/goPay/图片 513.svg"
              />
              微信支付
              <van-tag type="warning" class="tab">推荐</van-tag>
            </div>
          </template>
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell clickable @click="checked = '2'">
          <template #title>
            <div class="item_radio">
              <van-image
                width="1rem"
                height="1rem"
                src="@/../public/cartImg/goPay/图片 514.svg"
              />支付宝支付
            </div>
          </template>
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell clickable @click="checked = '3'">
          <template #title>
            <div class="item_radio">
              <van-image
                width="1rem"
                height="1rem"
                src="@/../public/cartImg/goPay/图片 515.svg"
              />银联支付
            </div>
          </template>
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <!-- Agree on -->
    <van-cell class="agree_on">
      <template #title>
        <van-checkbox v-model="checkbox" shape="square" icon-size=".4rem"
          >我已阅读并同意
          <span @click="jumpAgreePay" class="agree_on_pay">《支付协议》</span>
        </van-checkbox>
      </template>
    </van-cell>
    <!-- pay btn -->
    <van-cell-group class="btn" inset>
      <van-button type="primary" :disabled="!checkbox" block @click="submit"
        >确认支付
      </van-button>
    </van-cell-group>
  </div>
</template>
  
  <script setup>
//   引用 hooks
import { useCartGoPay } from "@/hooks/cart/useCart";
import {onUnmounted} from 'vue'
const { onClickLeft, checked, checkbox, jumpAgreePay, submit } = useCartGoPay();

// 测试组件是否销毁
onUnmounted(()=>{
    console.log('gopay组件销毁');
})
</script>
  
  <style lang="scss" scoped>
.notice_column {
  position: relative;
  .text {
    font-size: 0.36rem;
    position: relative;
    top: -0.15rem;
    .time {
      color: rgba(144, 192, 239, 1);
    }
  }
}
// pay_way
.pay_way {
  .item_radio {
    vertical-align: middle;
    position: relative;
    .van-image {
      vertical-align: middle;
      margin-right: 0.3rem;
    }
    .tab {
      position: relative;
      font-size: 0.23rem;
      bottom: 0.16rem;
      left: 0.1rem;
    }
  }
}
// agree_on
.agree_on {
  background: none;
  .van-checkbox {
    font-size: 0.33rem;
    .agree_on_pay {
      color: rgba(85, 122, 157, 1);
      cursor: pointer;
    }
  }
}
// pay btn
.btn {
  margin-top: 0.1rem;
}
</style>